<template>
  <div class="MyCourse">
    <van-nav-bar
        title="我的课程"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-row
        type="flex" justify="center" align="middle" class="header">
    </van-row>

    <div class="my-page">
     <div class="learning-time">
     <span>今日学习：</span>
        <span>{{totalTodayStudy }}</span>
        <span>分钟</span>
      </div>
      <div class="learning-time">
        <span>本周学习：</span>
        <span>{{ totalWeekStudy }}</span>
        <span>分钟</span>
      </div>
      <div class="learning-time" @click="gotoStudentReportPage" is-link>
        <span>累计学习：</span>
        <span>{{ totalStudy }}</span>
        <span>分钟</span>
      </div>
      <button @click="exchangeCurrency">兑换货币</button>
    </div>
    <van-tabs v-model:active="activeTab">
          <div class="course-list">
            <van-cell-group v-for="(course, index) in courses" :key="index" @click="goToOneCourse">
              <van-cell
                  :title="course.title"
                  :value="formatProgress(course)"
                  is-link
                  @click="goToCourse(course)"
              >
                <van-row
                    type="flex" justify="center" align="left" class="ttt">
                </van-row>
                <template #label>
                  <div>第一节已经观看{{course.progress}}分钟 /共{{course.totalLessons}}节</div>
                   <div>状态：{{course.status}}</div>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
    </van-tabs>
  </div>
</template>

<script setup>
import {ref,computed} from 'vue'
import {useRouter} from "vue-router";
import axios from "axios";
import {showToast} from "vant";
import {get} from "../../util/request.js";
const router=useRouter();
const onClickLeft = () => {
  router.push("/my");
  // 返回按钮逻辑
};
const activeTab = ref(0);
const loading = ref(true);
const finished = ref(true);
const exchangeCurrency = () => {
  router.push("/exchangeCurrency");
};
const onLoad = async () => {
  loading.value = true;
  loading.value = false;
};
const totalTodayStudy = computed(() => {
  return list1.value.map(item => item.todayLearning).reduce((sum, time) => sum + time, 0);
});
const totalWeekStudy = computed(() => {
  return list1.value.map(item => item.thisWeekLearning).reduce((sum, time) => sum + time, 0);
});
const totalStudy = computed(() => {
  return list1.value.map(item => item.totalLearning).reduce((sum, time) => sum + time, 0);
});
const list1 = ref([
      {
        todayLearning:'',
        thisWeekLearning:'',
        totalLearning:''
      }
]
)
const goToOneCourse = () => {
  router.push("/onlineCourse");
};
const courses = ref([
  {
    title: '模度——研究的环境、社会背景、形勢及进展',
    progress: 20,
    totalLessons: 30,
    status: '直播',
  },
  {
    title: '快题设计冲刺班',
    progress: 20,
    totalLessons: 30,
    status: '更新中',
  },
  {
    title: '快题设计冲刺班',
    progress: 20,
    totalLessons: 10,
    status: '已完结',
  },
]);
get(
   'courseprogress/findAll'
).then(
    (data) => {
      console.log(JSON.stringify(data))
      // 加载状态结束
      loading.value = false;
      finished.value = true

      if (data.code == 0) {
        showToast("查询成功");
        courses.value = data.data;// 初始化界面
        list1.value = data.data;// 初始化界面
      } else {
        showToast("查询失败");
      }


    })
    .catch(
        function () {
          alert("服务器错误")
        }
    )
const formatProgress = (course)=>{
  return `${course.progress} 分钟 / 共 ${course.totalLessons} 节`;
}
const goToCourse = (course)=>{
  console.log('Go to course:', course);
}
 const  gotoStudentReportPage = ()=>{
  router.push("/StudentReport")
 }
</script>

<style scoped>
.MyCourse {
  padding: 16px;
}
.my-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 20vh;
  padding: 20px;
}

.avatar-container img {
  width: 100%;
  height: auto;
}

.learning-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.learning-time span:not(:last-child) {
  margin-right: 10px;
}
.header {
  background-image: url("https://cdn.pixabay.com/photo/2016/03/04/19/36/background-1236581_1280.jpg");
  background-size: cover;
  background-repeat: no-repeat; /* 禁止背景图像重复 */
  height: 100px; /* 自定义高度 */
}
.course-list {
  padding: 20px;
}
.ttt{
  background-image: url("https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/20240615173401.png");
  background-size:auto;
  height: 100px; /* 自定义高度 */
  width: 90px;
}
</style>